<template>
	<view class="records-page">
		<!-- 自定義導航欄 -->
		<u-navbar
			title="考勤记录"
			:border="false"
			:auto-back="true"
			:bg-color="'#FFFFFF'"
			:title-color="'#333333'"
			:title-size="36"
			:title-weight="'bold'"
			placeholder
		>
		</u-navbar>

		<!-- 考勤记录列表 - 滚动区域 -->
		<scroll-view class="records-list" scroll-y="true">
			<!-- 加载状态 -->
			<view v-if="loading" class="loading-state">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 数据列表 -->
			<view v-else>
				<view 
					v-for="(item, index) in recordsList" 
					:key="index"
					class="record-item"
				>
					<view class="record-content">
						<view class="item-header">
							<view class="item-title">
								<text class="title-text">{{ item.customerName || '未知企业' }}</text>
								<text class="month-tag">{{ item.attendanceDate || '未知月份' }}</text>
							</view>
						</view>
						
						<view class="item-info">
							<view class="info-row">
								<text class="info-label">工时：</text>
								<text class="info-value">{{ item.actTimes || 0 }}小时</text>
							</view>
							<view class="info-row">
								<text class="info-label">补工时：</text>
								<text class="info-value">{{ item.repairTime || 0 }}小时</text>
							</view>
							<view class="info-row">
								<text class="info-label">总工时：</text>
								<text class="info-value total-time">{{ item.totalTime || 0 }}小时</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 空状态 -->
				<view v-if="recordsList.length === 0 && !loading" class="empty-state">
					<view class="empty-illustration">
						<img class="img" src="@/static/icon/empty.png" />
					</view>
					<text class="empty-text">暂无考勤记录</text>
					<view class="empty-actions">
						<view class="action-btn refresh-btn" @click="refreshData">
							<text class="btn-text">刷新重试</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { userStore } from '@/stores/userStore'
import { attendanceApi } from '@/api/api-helper.js'

// 响应式数据
const loading = ref(false)

// 考勤记录列表数据
const recordsList = ref([])

// 获取考勤记录列表
const getRecordsList = async () => {
	loading.value = true
	try {
		const openId = userStore.getOpenId()
		if (!openId) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			})
			return
		}

		const params = {
			openId: openId,
			currentPage: 1,
			pageSize: 10000
		}

		// 调用真实的API接口
		const response = await attendanceApi.getMyAttendanceList(params)
		
		console.log('API响应:', response)
		
		if (response && response.code === 200) {
			// 根据接口文档，可能返回的是分页数据
			if (response.data && response.data.list) {
				recordsList.value = response.data.list || []
			} else if (response.data && Array.isArray(response.data)) {
				recordsList.value = response.data
			} else {
				recordsList.value = []
			}
		} else {
			recordsList.value = []
			if (response && response.msg) {
				uni.showToast({
					title: response.msg,
					icon: 'none'
				})
			}
		}
		
		console.log('处理后的考勤记录列表数据:', recordsList.value)
		
	} catch (error) {
		console.error('获取考勤记录列表失败:', error)
		recordsList.value = []
		uni.showToast({
			title: '网络错误',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 方法
const refreshData = () => {
	getRecordsList()
}

// 生命周期
onMounted(() => {
	getRecordsList()
})

onShow(() => {
	// 每次显示页面时刷新数据
	getRecordsList()
})
</script>

<style lang="scss" scoped>
.records-page {
	min-height: 100vh;
	background-color: #F5F5F5;
}



/* 列表样式 */
.records-list {
	padding: 20rpx;
}

.record-item {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.record-content {
	padding: 30rpx;
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.item-title {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.title-text {
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
}

.month-tag {
	padding: 6rpx 12rpx;
	background-color: #f0f9f6;
	color: #31a880;
	border-radius: 12rpx;
	font-size: 22rpx;
}

.item-info {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.info-row {
	display: flex;
	align-items: center;
}

.info-label {
	font-size: 26rpx;
	color: #666666;
	min-width: 120rpx;
}

.info-value {
	font-size: 26rpx;
	color: #333333;
	flex: 1;
	
	&.total-time {
		font-weight: bold;
		color: #31a880;
	}
}



/* 加载状态样式 */
.loading-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 50rpx 0;
}

.loading-spinner {
	width: 80rpx;
	height: 80rpx;
	border: 8rpx solid #F3F3F3;
	border-top: 8rpx solid #31a880;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #666666;
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 50rpx 0;
}

.empty-illustration {
	width: 400rpx;
	height: 400rpx;
	margin-bottom: 20rpx;
}

.empty-illustration .img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
	margin-bottom: 20rpx;
	margin-top: -200rpx;
}

.empty-actions {
	display: flex;
	gap: 15rpx;
}

.action-btn {
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	border: 1rpx solid #31a880;
	background-color: #31a880;
	color: #FFFFFF;
	cursor: pointer;
	transition: all 0.3s ease;
}

.action-btn:active {
	background-color: #27866a;
}

.btn-text {
	font-size: 24rpx;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
</style>
